<template>
	<uiwu-popup v-model="showM">
		<view class="uiwu-popup uiwu-flex-center" @tap.stop>
			<view class="uiwu-popup-box">
				<view class="content">
					<slot>提示内容</slot>
				</view>
				<view class="btn uiwu-flex-space">
					<text @tap="cancel"></text>
					<text @tap="confirm"></text>
				</view>
			</view>
		</view>
	</uiwu-popup>
</template>

<script lang="ts" setup>
/**
 * @event {Function()} confirm 确定回调 
 */
import { computed } from "vue";
const props = defineProps({
	modelValue: Boolean
})
const emits = defineEmits(['confirm', 'cancel', 'update:modelValue'])
const showM = computed(() => {
	return props.modelValue
})
const confirm = () => {
	emits('confirm')
	emits('update:modelValue', false);
}
const cancel = () => {
	emits('update:modelValue', false);
}
</script>

<style lang="scss" scoped>
.uiwu-popup {
	width: 100%;
	height: 100%;

	&-box {
		width: 576rpx;
		height: 528rpx;
		background: url('@/static/image/tips.png') no-repeat 0 0;
		background-size: 100% auto;
		padding-top: 144rpx;

		.title {
			font-size: 40rpx;
			font-weight: 800;
			color: #231815;
			text-align: center;
		}

		.content {
			padding: 0 123rpx 0 107rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #444444;
			height: 88rpx;
			margin-top: 72rpx;
		}

		.btn {
			margin-top: 50rpx;
			padding: 0 53rpx 0 37rpx;

			text {
				position: relative;
				width: 224rpx;
				height: 72rpx;

				&:nth-child(1) {
					font-size: 32rpx;
					font-weight: bold;
					color: #231815;

					&::before {
						content: "取消";
						width: 224rpx;
						height: 72rpx;
						background: #FFFFFF;
						border-radius: 36rpx;
						border: 3rpx solid #231815;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 9;
						text-align: center;
						line-height: 72rpx;
					}

					&::after {
						content: "";
						width: 224rpx;
						height: 72rpx;
						background: #FFFFFF;
						border-radius: 36rpx;
						border: 3rpx solid #231815;
						position: absolute;
						left: 4rpx;
						top: 9rpx;
					}
				}

				&:nth-child(2) {
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;

					&::before {
						content: "确认";
						width: 224rpx;
						height: 72rpx;
						background: $qj-red;
						border-radius: 36rpx;
						border: 3rpx solid #231815;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 9;
						text-align: center;
						line-height: 72rpx;
					}

					&::after {
						content: "";
						width: 224rpx;
						height: 72rpx;
						background: $qj-red;
						border-radius: 36rpx;
						border: 3rpx solid #231815;
						position: absolute;
						left: 4rpx;
						top: 9rpx;
					}
				}
			}
		}
	}
}
</style>